<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        :size="'default'"
        status-icon
    >
        <el-row :gutter="2">
            <el-col :span="12">
                <el-form-item label="报表名称" prop="r_name">
                    <el-input v-model.trim="formData.r_name" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="收付类型" prop="fee_in_out">
                    <el-select
                        v-model="formData.fee_in_out"
                        filterable
                        placeholder="Select"
                        :clearable="true"
                    >
                        <el-option
                            v-for="optValue in SelectOptionFeeInOut"
                            :key="optValue.value"
                            :label="optValue.label"
                            :value="optValue.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-form-item>
                    <FeeCodSelect v-model:invalid-fee-cods="fee_cods">
                    </FeeCodSelect>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

    <div class="btn-group">
        <el-button-group>
            <el-button
                class="btn"
                type="primary"
                v-debounce="submitForm"
                size="large"
            >
                保存
            </el-button>
        </el-button-group>
    </div>
</template>
<script setup lang="ts" name="FeeReportDetail">
import { ReportManagerModel } from '@/common/types/report';
import { useAppStore } from '@/store/app';
import { ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { storeToRefs } from 'pinia';
import { ref, reactive, onMounted } from 'vue';
import FeeCodSelect from '@/components/forms/FeeCodSelect.vue';
import { ValidateFieldsError } from 'async-validator';
import { Request } from '@/app/request';
const { SelectOptionFeeInOut } = storeToRefs(useAppStore());

const formData = ref<ReportManagerModel>({});
const props = defineProps<{
    cfg: ReportManagerModel;
}>();
const emit = defineEmits<{
    close: [];
}>();

const formRef = ref<FormInstance>();
const fee_cods = ref<string[]>([]);
const rules = reactive<FormRules>({
    r_name: [{ required: true, message: '请输入报表名称', trigger: 'blur' }],
    fee_in_out: [
        {
            required: true,
            message: '请选择收付类型',
            trigger: 'blur',
        },
    ],
});
onMounted(() => {
    
    
    Object.assign(formData.value, props.cfg);
    console.log(formData.value);
    if (formData.value.cfgs) {
        fee_cods.value.length = 0;
        for (let index = 0; index < formData.value.cfgs?.length; index++) {
            const element = formData.value.cfgs[index];
            fee_cods.value.push(element.fee_cod as string);
        }
    }
});
const save = async () => {
    const formValid = await formRef.value?.validate(
        (isValid: boolean, _invalidFields?: ValidateFieldsError) => {
            // return isValid;
        },
    );
    if (formValid) {
        if (formData.value.id && formData.value.id > 0) {
            // 修改
            const req = new Request('费用报表定义修改', {
                id: formData.value.id,
                r_name: formData.value.r_name,
                fee_in_out: formData.value.fee_in_out,
                fee_cods: fee_cods.value,
            });
            const r = await req.post();
            if (r.code > 100) {
                return true;
            }
        } else {
            // 新增
            const req = new Request('费用报表定义增加', {
                r_name: formData.value.r_name,
                fee_in_out: formData.value.fee_in_out,
                fee_cods: fee_cods.value,
            });
            const r = await req.post();
            if (r.code > 100) {
                return true;
            }
        }
    } else {
        return false;
    }
};
const submitForm = async () => {
    const r = await save();
    if (r) {
        emit('close');
    }
};
/*
 * @Description:
 * @Author: zht
 * @Date: 2025-01-09
 * @LastEditTime: 2025-01-09
 * @LastEditors: zht
 * 佛祖保佑      永无BUG
 */
</script>
<style lang="scss" scoped>
.btn-group {
    .btn {
        margin-top: 5px;
        margin-right: 5px;
    }
}
</style>
